<!--
 * @Description: 
 * @Author: 胡涛
 * @Date: 2023-10-15 12:22:08
 * @LastEditors: 胡涛
 * @LastEditTime: 2023-11-12 14:23:55
-->
<template>
  <div class="page-wrapper">
    <div class="toolbar">
      <div class="breadcrumb">
        <a-breadcrumb>
          <a-breadcrumb-item>资源管理</a-breadcrumb-item>
          <a-breadcrumb-item>附件资料查询</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <a-space>
        <a-button type="primary" :loading="loading" @click="queryList">
          <template #icon>
            <SyncOutlined />
          </template>
          刷新
        </a-button>
        <!-- <a-button type="primary">
          <template #icon>
            <ExportOutlined />
          </template>
          导出
        </a-button> -->
      </a-space>
    </div>
    <div class="container">
      <div class="table">
        <a-table
          bordered
          sticky
          :columns="columns"
          :row-key="(record) => record.id"
          :data-source="dataSource"
          :pagination="pagination"
          :loading="loading"
          @change="handleTableChange"
        >
        </a-table>
      </div>
    </div>
  </div>

  <preview-file
    v-model:visible="previewModel.visible"
    :id="previewModel.id"
    :fileName="previewModel.fileName"
    v-if="previewModel.visible"
  />
</template>

<script lang="ts" setup>
import {
  PlusOutlined,
  ExportOutlined,
  SyncOutlined,
  EditOutlined,
  DeleteOutlined,
} from "@ant-design/icons-vue";
import { useListPage } from "@/helpers/pages";
import api from "@/api/resource/attachment";
import { AttachmentDto } from "@/api/resource/types";
import { h, onMounted, ref } from "vue";
import { PaginationConfig } from "ant-design-vue/es/pagination";
import { enumName, enums } from "@/plugins/enums";
import { Button, ButtonGroup, message, Popconfirm } from "ant-design-vue";
import { dictionaryName } from "@/plugins/dictionary";
import dayjs from "dayjs";
import PreviewFile from "@/components/preview-file/Index.vue";
import { checkActionStyle } from "@/helpers";

const previewModel = ref<{ visible: boolean; id: string; fileName: string }>({
  id: "",
  fileName: "",
  visible: false,
});

const {
  loading,
  dataSource,
  columns,
  pagination,
  popupModel,
  createQueryModel,
  onHandleCreate,
  onHandleUpdate,
} = useListPage<AttachmentDto, string>({
  columns: [
    {
      dataIndex: "bussinessType",
      title: "业务类别",
      customRender({ value }) {
        return dictionaryName("Platform.AttachmentBusinessType", value);
      },
    },
    {
      dataIndex: "businessName",
      title: "业务标题",
      customRender: ({ record }) => {
        if (record.extraProperties) {
          return record.extraProperties["businessName"] || "--";
        } else {
          return "--";
        }
      },
    },
    { dataIndex: "groupName", title: "附件分组" },
    { dataIndex: "name", title: "附件名称" },
    {
      dataIndex: "creationTime",
      title: "创建时间",
      width: 160,
      customRender({ value }) {
        return dayjs(value).format("YYYY-MM-DD HH:mm");
      },
    },
    {
      dataIndex: "action",
      title: "操作",
      width: 150,
      customRender: ({ record }: any) => {
        return h(ButtonGroup, [
          h(
            Button,
            {
              type: "primary",
              size: "small",
              ghost: true,
              style: checkActionStyle("View"),
              onClick() {
                previewModel.value = {
                  visible: true,
                  id: record.fileId,
                  fileName: record.name,
                };
              },
            },
            {
              icon() {
                return [h(EditOutlined)];
              },
              default() {
                return "查看";
              },
            }
          ),
        ]);
      },
    },
  ],
});

const queryList = async () => {
  loading.value = true;
  let result = await api.getList(createQueryModel());
  dataSource.value = result.items;
  pagination.total = result.totalCount;
  loading.value = false;
};

const handleTableChange = (pageConfig: PaginationConfig, filters: any) => {
  pagination.current = pageConfig.current;
  queryList();
};

onMounted(() => {
  queryList();
});
</script>

<style lang="less" scoped></style>
